<template>
    <div class="home-page page">
		<div class="page-top">
			<!-- 工具 -->
			<div class="tools">
				<el-button type="primary" @click="suiji">随机一个</el-button>
			</div>
			<div class="chinese-con">
				<span v-if="actData">{{actData.c}}</span>
			</div>
		</div>
		<div class="page-bottom">
			<div class="button-con">
				按钮
			</div>
			<div class="input-con">
				<el-input
					type="textarea"
					:rows="3"
					placeholder="请输入内容"
					@keydown.native.enter.prevent ="send"

					@keydown.native.down.prevent ="suiji"
					@keydown.native.right.prevent ="suiji"


					@keyup.native.17 ="ctrlUp"
					@keydown.native.17.prevent ="ctrlDown"
		
					v-model="value">
				</el-input>
			</div>
			<div class="tishi-con">
				<span v-if="!showTishi" style="color:#999;">按下ctrl获取提示</span>
				<span v-else>{{actData.e}}</span>
			</div>
			<div class="his-con">
				<div class="item" v-for="(item,index) in hisData" :key="index">
					<div class="left">{{item.c}}</div>
					<div class="right">{{item.e}}</div>
				</div>
			</div>
		</div>
    </div>
</template>
<script>
import data from "@/assets/data/"

export default {
    data() {
        return {
			value:"",
			// 所有
			allData:[],
			// 当前
			actData:{},
			// 历史
			hisData:[],

			showTishi:false
        }
	},
	created(){
		this.allData = data

		this.suiji()
	},
    methods: {
		send(){
			this.value = this.value.replace(/(^\s*)|(\s*$)/g, "");
			if (!this.value) {
				this.value = ""
				this.$message.error("不能为空");
				return;
			}else{
				if(this.value == this.actData.e){
					this.$message({
						message: '输入正确',
						type: 'success'
					});
				}else{
					this.$message.error("输入错误!!!");
				}
			}
		},
		// 拿取上一个
		// up(){
		// 	this.value = ""
		// 	// 拿取之前,历史记录里面插入一条
		// 	if(this.actData.id){
		// 		this.hisData.push(this.actData)
		// 	}

			

		// },
		// 随机拿取一个
		suiji(){
			this.value = ""
			// 拿取之前,历史记录里面插入一条
			if(this.actData.id){
				this.hisData.push(this.actData)
			}

			let index = this.floor(0,this.allData.length)
			this.actData = this.allData[index]
		},
		// m到n  不包括n
		floor(m,n){
		　　var num = Math.floor(Math.random()*(m - n) + n);
		　　return num
		},
		ctrlDown(){
			this.showTishi = true
		},
		ctrlUp(){
			this.showTishi = false
		}
    }
}
</script>
<style lang="scss" scoped>
.home-page{
    .page-top{
		background: #fff;
		margin: 8px 8px 0;
		padding: 8px;
		.chinese-con{
			background: #eee;
			padding: 8px;
			font-size: 16px;
			margin-top: 8px;
		}
	}
	.page-bottom{
		background: #fff;
		margin: 8px 8px 0;
		padding: 8px;
		.input-con{
			margin-top: 8px;
		}
		.tishi-con{
			background: #eee;
			margin-top: 8px;
			padding: 8px;
			height: 50px;
		}
		.his-con{
			.item{
				overflow: hidden;
				.left{
					float: left;
				}
				.right{
					float: right;
				}
			}
		}
	}
    
}
</style>
